﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Right.Video.ascx.cs" Inherits="Controls_Right_Video" %>
<style type="text/css">
    .all
    {
        width: 266px;
        float: left;
        margin: 0px;
        height: 64px;
    }

        .all ul
        {
            list-style: none outside none;
            margin: 0;
            padding: 0;
            position: relative;
            width: 3000px;
        }

        .all li
        {
            display: inline;
            float: left;
            margin: 0;
            padding: 0;
        }
</style>
<div class="title tit4"><a href="/video/24-0/index.html">VIDEO</a></div>
<div class="p_box3">
       <div id="mediaplayer" style="margin: 0 0 8px;width:298px; height:178px">
    </div>    
    <div style="height: 64px; float: left;padding-top:5px;">
        <div style="padding: 7px 3px 5px 2px; float: left; background: #d1d3d4;">
            <a href="javascript:moveRight();">
                <img src="/resources/images/a5.jpg" border="0" /></a>
        </div>
        <div class="all" style="overflow: hidden;">
            <ul id="slideGameItem" class="list_video3">
                <asp:Repeater runat="server" ID="rptNextVideo">
    <ItemTemplate>
           <li><a title="<%#Eval("Title") %>" href="javascript:;" onclick="javascript:playvideo('<%#Eval("SubTitle") %>','<%#Eval("SubTitle") %>');">
                    <img width="84px" height="48px" src="<%#"http://media.fica.vn/wmedia/"+Eval("ImageUrl")%>" border="0" /></a></li>      
    </ItemTemplate>
</asp:Repeater>
              
            </ul>
        </div>
        <div style="padding: 7px 3px 5px 2px; float: left; background: #d1d3d4;">
            <a href="javascript:moveLeft();">
                <img src="/resources/images/a6.jpg" border="0" /></a>
        </div>
    </div>
    <div class="clear"></div>
</div>
<!--end p_box3-->
<script type="text/javascript">

    var itemIndex = 89; //slide_adv width/itemDefault
    var itemCount = <%=count%>;
    var itemSlide = 3;
    var itemDefault = 3;
    var itemCurr = 0;
    var maxSlide = parseInt((itemCount - itemDefault) / itemSlide + 1);
    function moveLeft() {
        if (itemCurr + itemDefault < itemCount) {
            if (itemDefault + itemCurr > itemCount - itemSlide) {
                $("#slideGameItem").animate({ left: '+=-' + (itemCount - (itemDefault + itemCurr)) * itemIndex }, 1000);
                itemCurr = itemCount - itemDefault;
            }
            else {
                $("#slideGameItem").animate({ left: '+=-' + itemSlide * itemIndex }, 1000);
                itemCurr += itemSlide;
            }
        }
    }
    function moveRight() {
        if (itemCurr > 0) {
            if (itemCurr < itemSlide) {
                $("#slideGameItem").animate({ left: '-=-' + itemCurr * itemIndex }, 1000);
                itemCurr = 0;
            }
            else {
                $("#slideGameItem").animate({ left: '-=-' + itemIndex * itemSlide }, 1000);
                itemCurr -= itemSlide;
            }
        }
    }

      jwplayer('mediaplayer').setup({
        'flashplayer': '/jwplayer/jwplayer.flash.swf',
        'id': 'playerID',
        'width': '300',
        'height': '178',
        'file': 'http://www.youtube.com/watch?v=<%=urlYoutube %>',
        'image': '<%=urlImage %>',
          'controlbar': 'bottom',
          'stretching':"exactfit",
          events: {
              onMeta: function(event) {
                  if(event.metadata.width != undefined && event.metadata.height != undefined && event.metadata.width != 0) {
                      var playerWidth = 300;
                      var playerHeight = (event.metadata.height/event.metadata.width)*playerWidth;
                      jwplayer("mediaplayer").resize(playerWidth, playerHeight);
                  }
              }
          }
     });

</script>

